<template>
  <a-drawer
    :width="drawerWidth"
    @close="handleCancel"
    :visible="visible"
    :confirmLoading="confirmLoading"
  >
    <template  slot="title">
      <div style="width: 100%;">
        <span>{{ title }}</span>
        <span style="display:inline-block;width:calc(100% - 51px);padding-right:10px;text-align: right">
          <a-button @click="toggleScreen" icon="appstore" style="height:20px;width:20px;border:0px"></a-button>
        </span>
      </div>
    </template>

    <a-spin :spinning="confirmLoading" class="drawer-content">
      <a-form :form="form" layout="inline">
        <a-form-item
          label="流程定义名称">
          <a-input autocomplete="off" readOnly  v-decorator="['processDefinitionName']"/>
        </a-form-item>
        <a-form-item
          label="流程定义Key">
          <a-input readOnly  v-decorator="['processDefinitionKey']" />
        </a-form-item>
        <a-form-item
          label="名称">
          <a-input readOnly  v-decorator="['name']" />
        </a-form-item>
        <a-form-item
          label="描述">
          <a-input readOnly  v-decorator="['description']" />
        </a-form-item>
       
        <a-form-item
          label="启动时间">
          <a-input readOnly  v-decorator="['startTime']" />
        </a-form-item>
        <a-form-item
          label="结束时间">
          <a-input readOnly  v-decorator="['endTime']" />
        </a-form-item>
        <a-form-item
          label="启动人">
          <a-input readOnly  v-decorator="['startUserId']" />
        </a-form-item>
        <a-form-item
          label="业务标识">
          <a-input readOnly  v-decorator="['businessKey']" />
        </a-form-item>

      </a-form>
      <div v-show="!!processDetail.startFormDTO">
        <a-divider >启动表单</a-divider>
        <FormIframe ref="startFormIframe" :buttonShow = "false"></FormIframe>
      </div>


      <a-divider>任务流程</a-divider>
      <a-table
        ref="table"
        size="middle"
        bordered
        :rowKey="(r)=>r.id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        @change="handleTableChange">
        <span slot="ellipsis" slot-scope="text">
          <ak-ellipsis :value="text"/>
        </span>
        <a-table
          slot="expandedRowRender"
          :rowKey="`${r.id}_form`"
          slot-scope="r, index"
          :columns="[{title: '提交表单信息',dataIndex: 'owner',scopedSlots: {customRender: 'dyForm'}}]"
          :data-source="[r]"
          :pagination="false"
        >
          <FormIframe slot="dyForm" v-if="!!r.formDTO"  :buttonShow = "false" :propFormData = "r.formDTO" @ok="loadData"></FormIframe>
        </a-table>
        <span slot="action" slot-scope="text, record"  class="table-operator">
        </span>
      </a-table>
    </a-spin>
    <div class="drawer-bootom-button" v-show="!disableSubmit">
      <a-popconfirm title="确定放弃编辑？" @confirm="handleCancel" okText="确定" cancelText="取消">
        <a-button style="margin-right: .8rem">取消</a-button>
      </a-popconfirm>
      <a-button @click="handleSubmit" type="primary" :loading="confirmLoading">提交</a-button>
    </div>
  </a-drawer>
</template>

<script>

  import {activitiHistoryProcessUrl} from '../../../api/url';
  import AkfhModelDrawMixin from '../../../mixin/AkfhModelDrawMixin'
  import AkfhListMixin from '../../../mixin/AkfhListMixin'
  import AkDictSelectTag from "../../../components/akfh/AkDictSelectTag";
  import AkTreeSelect from "../../../components/akfh/AkTreeSelect";
  import { getAction } from '../../../api/manage'
  import FormIframe from './FormIframe'
  import AkEllipsis from '../../../components/akfh/AkEllipsis'
  export default {
    name: "ProcessDetailModal",
    components: { AkEllipsis, FormIframe, AkTreeSelect, AkDictSelectTag},
    mixins:[AkfhModelDrawMixin, AkfhListMixin],
    data () {
      return {
        url: activitiHistoryProcessUrl,
        columns:[
          {
            title: '#',
            dataIndex: '',
            key: 'rowIndex',
            width: 120,
            align: "center",
            customRender: function (t, r, index) {
              return parseInt(index) + 1;
            }
          },
          {
            title: '任务名称',
            align: "center",
            dataIndex: 'name',
            scopedSlots: {customRender: 'ellipsis'},
          },

          {
            title: '任务描述',
            align: "center",
            dataIndex: 'description',
            scopedSlots: {customRender: 'ellipsis'},
          },
          {
            title: '重要级别',
            align: "center",
            dataIndex: 'priority',
          },
          {
            title: '任务拥有人',
            align: "center",
            dataIndex: 'owner',
            scopedSlots: {customRender: 'ellipsis'},
          },
          {
            title: '任务执行人',
            align: "center",
            dataIndex: 'assignee',
            scopedSlots: {customRender: 'ellipsis'},
          },
          {
            title: '创建时间',
            align: "center",
            dataIndex: 'createTime',
          },
          {
            title: '开始时间',
            align: "center",
            dataIndex: 'startTime',
          },
          {
            title: '结束时间',
            align: "center",
            dataIndex: 'endTime',
          },
          {
            title: '领取时间',
            align: "center",
            dataIndex: 'claimTime',
          },
          {
            title: '到期时间',
            align: "center",
            dataIndex: 'dueDate',
          },

          {
            title: '任务类别',
            align: "center",
            dataIndex: 'category',
            scopedSlots: {customRender: 'ellipsis'},
          },
          {
            title: '任务时长',
            align: "center",
            dataIndex: 'durationInMillis',
          },
          {
            title: '完成时长',
            align: "center",
            dataIndex: 'workTimeInMillis',
          },
          {
            title: '删除原因',
            align: "center",
            dataIndex: 'deleteReason',
            scopedSlots: {customRender: 'ellipsis'},
          },
          {
            title: '操作',
            dataIndex: 'action',
            align: "center",
            scopedSlots: {customRender: 'action'},
          }
        ],
        ipagination:false,
        processDetail:{
          taskDTOList:[],
          startFormDTO:false
        },
      }
    },
    mounted () {
    },
    methods: {
      beforeLoadData(){
        return !!this.model.id;
      },
      loadData(){
        if(!this.beforeLoadData()){
          return;
        }
        this.loading=true;
        let id = this.model.id;
        getAction(this.url.getDetailInfo, {id})
          .then(res=>{
            if(res.success){
              this.processDetail = res.result;

            }else{
              this.processDetail = {};
            }
            this.dataSource= this.processDetail.taskDTOList;
            if(this.processDetail.startFormDTO){
              this.$refs.startFormIframe.loadData(this.processDetail.startFormDTO);
            }

          }).finally(()=>{
          this.loading = false;
        })
      },
      // 根据屏幕变化,设置抽屉尺寸
      resetScreenSize(){
        let screenWidth = document.body.clientWidth;
        this.drawerWidth = screenWidth ;
      },

      afterFullData() {
        this.loadData();
      },

    }
  }
</script>

<style scoped>

</style>
